<template>
		<view class="container">
			<InputBox v-if="PassCodeOpen" :tel="inputvalue" @boxClick="ClosePassCode"></InputBox>
			
			<view class="Rects">
				<view class="littleRect" style="background: rgba(20, 178, 181, 1)"></view>
				<view class="littleRect" style="background: rgba(223, 229, 230, 1)"></view>
			</view>
			
			<view class="message-box">
				<image class="message-box-image" v-if="inputvalue === ''" src="../../static/phone.png"></image>
				<input class="message-box-item" type="number" v-model="inputvalue" @input="WhenInputSth" :disabled="PassCodeOpen || openNextBtn" 
				maxlength="11" name="phone" placeholder="      请输入手机号" placeholder-class="holder-color"/>
				<input class="message-box-item code-item" type="text" v-model="codevalue" @input="WhenInputCode" :disabled="PassCodeOpen || openNextBtn" 
				name="code" placeholder="图形验证码" placeholder-class="holder-color"/>
				<view class="message-box-item right">
					<image class="message-box-item-imgcode" 
					:src="'https://6765451k5k.goho.co/imgcodes/' + uuid_uuid + '/'" @click="imgCli"></image>
				</view>
			</view>
			
			<view class="toggle-box">
				<checkbox class="toggle-item" color="#14B2B5" :checked="agree" @click="ChangeAgree" :disabled="PassCodeOpen || openNextBtn" ></checkbox>
				<view class="toggle-text">已阅读并同意
				<view class="green-text">《服务条款》</view>与
				<view class="green-text">《隐私权政策》</view>。</view>
			</view>
			
			<view style="margin-top: 20px;"></view>
			<SpButton :name="PassCodeOpen === true? '已发送':'发送验证码'" :wh="40" @btnClick="OpenPassCode" ></SpButton>
			<view style="margin-top: 260px;"></view>
			<button class="nextstep-btn" :style="{'background-color' : 
		openNextBtn ? 'rgba(20, 178, 181, 1)' : '#DFE5E6'}" @click="gotoRegister2Page">下一步</button>
			
			
			
		</view>

</template>

<script>
	export default {
		data() {
			return {
				inputvalue : '',//填写手机号码的内容
				codevalue : '',//填写验证码的内容
				PassCodeOpen : false,//是否开启验证码界面
				openNextBtn:false,//是否开启下一个按钮
				agree: false,//是否同意了条款
				
				timeStamp: 0, // 时间戳
				uuid_uuid: "",// 生成验证码所需的uuid
			};
		},
		onLoad() {
			// 时间戳
			// 一上来就有的验证码
			this.timeStamp = new Date().getTime();
			this.uuid_uuid = this.uuid(20);
		},
		methods :{
			//填写手机号时触发的函数
			WhenInputSth(e) {
				const o = e.target;
				const inputRule = /[^\d]/g  //修改inputRule 的值
				this.$nextTick(function() {
					this.inputvalue = o.value.replace(inputRule , '');
				})
			},
			//填写验证码时触发的函数
			WhenInputCode(e) {
				const o = e.target;
				const inputRule = /[^\d^a-zA-Z]/g  //修改inputRule 的值
				this.$nextTick(function() {
					this.codevalue = o.value.replace(inputRule , '');
				})
			},
			//请求验证码并开启验证码界面
			OpenPassCode(){
				if(this.inputvalue === '' || this.codevalue === '')
					return uni.$showMsg('请先填写手机号与验证码');
				if(!this.agree)
					return uni.$showMsg('请先同意并勾选《服务条款》与《隐私权政策》');
				this.PassCodeOpen = true;
			},
			//关闭验证码界面
			ClosePassCode(){
				this.PassCodeOpen = false;
				this.openNextBtn = this.NextStepJudge();
			},
			//下一步 按钮是否激活
			NextStepJudge(){
				if(true)
				  return true;
				return false;
			},
			//传送至下一个注册页面
			gotoRegister2Page(){
				if(this.openNextBtn)
				uni.navigateTo({
					url: '/subpkg/register_2/register_2'
				})
			},
			//修改是否同意条款选项
			ChangeAgree(){
				this.agree = !this.agree;
			},
			//生成uuid 指定长度和基数
			uuid(len, radix) {
			      var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
			      var uuid = [],
			          i;
			      radix = radix || chars.length;
			      if (len) {
			        for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
			      } else {
			        var r;
			        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
			        uuid[14] = '4';
			        for (i = 0; i < 36; i++) {
			          if (!uuid[i]) {
			            r = 0 | Math.random() * 16;
			            uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r];
			          }
			        }
			      }
			 
			      return uuid.join('');
			},
			// 点击更换图片验证码
			imgCli() {
			  // 时间戳
			  this.timeStamp = new Date().getTime();
			  this.uuid_uuid = this.uuid(20);
			},

		}
	}
</script>

<style lang="scss">
.container {
	align-items: center;
	
	
	.Rects{
		margin-left: 40%;
		margin-top: 14px;
		display: flex;
		
		.littleRect{
			width: 32px;
			height: 4px;
			opacity: 1;
			border-radius: 4px;
			margin-left: 5px;
		}
	}
	
	.message-box {
		margin-top: 80px;
		margin-left: 40px;
		
		.message-box-image {
			position:absolute;
			width:20px;
			height:20px;
			margin-top: 15px;
			margin-left: 75px;
		}
		
		.message-box-item {
			margin-top: 10px;
			width: 85%;
			height: 50px;
			border-radius: 5px;
			border: 2px solid #dddddd;
			background-color: white;
			text-align: center;
			font-size: 16px;
			color: rgba(223, 229, 230, 1);
			
			&.code-item {
				position: absolute;
				width: 45%;
			}
			
			&.right {
				margin-left: 50%;
				width: 26%;
				height: 52px;
				position: absolute;
				border: 0px solid rgba(196, 196, 196, 1);
				background-color: rgba(196, 196, 196, 1);
				
				.message-box-item-imgcode {
					width: 100%;
					height: 100%;
				}
			}
			
		}
	}
	
	.toggle-box {
		margin-top: 75px;
		margin-left: 30px;
		display: flex;
		
		.toggle-item {
			transform: scale(0.5);
		}
		
		uni-checkbox .uni-checkbox-input,
		checkbox .wx-checkbox-input {
			border : 4px solid rgba(196, 196, 196, 1);
			
		}
		
		// uni-checkbox.checked .uni-checkbox-input,
		// checkbox.checked .wx-checkbox-input {
		// 	border : 4px solid "#14B2B5";
		// 	background-color: "#14B2B5";
		// }
		
		.toggle-text {
			margin-top: 5px;
			margin-left : -5px;
			font-size: 10px;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 18px;
			color: rgba(34, 38, 37, 1);
			display: flex;
			
			.green-text{
				color: rgba(20, 178, 181, 1);
			}
		}
	}
	
	.nextstep-btn {
		width: 90%;
		height: 50px;
		color: white;
		border-radius: 8px;
		border: none;
		//background: rgba(223, 229, 230, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0px 16px 0px 16px;
		font-size: 14px;
	}
}

.holder-color {
	color: rgba(223, 229, 230, 1);
}
</style>
